<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/5/29
  Time: 10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/common/com.jsp"%>
</head>

<body>
<div id="root">
    <Collapse v-model="Pane1">
        <Panel name="Pane1">
            多条件查询
            <p slot="content">
                <i-form :label-width="70" inline>
                <Form-Item label="用户编号:">
                    <i-input v-model="managementVo.userCode"></i-input>
                </Form-Item>
                <Form-Item label="加入时间:">
                    <Date-Picker type="date" placeholder="start date" style="width: 200px"  v-model="managementVo.stime"></Date-Picker>
                    <Date-Picker type="date" placeholder="end date" style="width: 200px"  v-model="managementVo.etime"></Date-Picker>
                </Form-Item>
                <i-button type="primary" @click="pageNo=1;getManagement();">搜索</i-button>
                </i-form>
            </p>

        </Panel>
    </Collapse>
    <card>
        <i-button type="primary"  @click="add">添加用户</i-button>
    </card>
    <i-table :columns="columns" :data="data"  height="400" Border stripe @on-selection-change="tableSelect=arguments[0]">
        <template slot-scope="{row,index}" slot="action">
            <i-Button type="info" size="large"  @click="update(row,index)">修改</i-Button>
            <i-Button type="error" size="large" @click="del(row,index)">删除</i-Button>
        </template>
    </i-table>
     <Modal v-model="modaladd" title="添加角色" @on-ok="doadd">
         <i-Form :label-width="80">
             <Form-Item label="公司编号:">
                 <Input type="text" v-model="role.userCode" placeholder="请输入公司编号">
             </Form-Item>
             <Form-Item label="公司名称:">
                 <Input type="text" v-model="role.name" placeholder="请输入公司名称">
             </Form-Item>
             <Form-Item label="姓名:">
                 <Input type="text" v-model="role.userName" placeholder="请输入您的姓名">
             </Form-Item>
             <Form-Item label="电话:">
                 <Input type="text" v-model="role.tphone" placeholder="请输入您的电话">
             </Form-Item>
             <Form-Item label="手机:">
                 <Input type="text" v-model="role.phone" placeholder="请输入您的手机">
             </Form-Item>
             <Form-Item label="地址:">
                 <Input type="text" v-model="role.address" placeholder="请输入您的地址">
             </Form-Item>

         </i-Form>
</Modal>
    <Modal v-model="modalupdate" title="修改角色" @on-ok="doupdate">
        <i-Form :label-width="80">
            <Form-Item label="公司编号:">
                <Input type="text" v-model="role.userCode" size="large">
            </Form-Item>
            <Form-Item label="公司名称:">
                <Input type="text" v-model="role.name" size="large">
            </Form-Item>
            <Form-Item label="姓名:">
                <Input type="text" v-model="role.userName" size="large">
            </Form-Item>
            <Form-Item label="电话:">
                <Input type="text" v-model="role.tphone" size="large">
            </Form-Item>
            <Form-Item label="手机:">
                <Input type="text" v-model="role.phone" size="large">
            </Form-Item>
            <Form-Item label="地址:">
                <Input type="text" v-model="role.address" size="large">
            </Form-Item>
            <Form-Item label="加入时间:">
                <Date-Picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="role.userDate"></Date-Picker>
            </Form-Item>
        </i-Form>
    </Modal>
    <template>
        <Page :total="total"
              show-total
              show-elevator
              :page-size="pageSize"
              :current.sync="pageNo"
              style="margin-left: 0px"
              show-sizer
              :page-size-opts="[5,10,15,20]"
                @on-page-size-change="pageSize=arguments[0];getManagement();"
              @on-change="getManagement();"
                />
    </template>
</div>
</body>
<script>
    new Vue({
        el :"#root",
        data:{
            columns :[
                {title:"公司编号",key:"userCode"},
                {title:"公司名称",key:"name"},
                {title:"姓名",key:"userName"},
                {title:"电话",key:"tphone"},
                {title:"手机",key:"phone"},
                {title:"地址",key:"address"},
                {title:"加入时间",key:"userDate"},
                {title:"操作",slot:"action",width:170}




            ],
            data:[],
            role:{},
            managementVo:{},
            modaladd:false,
            modalupdate:false,
            treedata:[] ,
            total:50,
            pageSize:6,
            pageNo:1,
            tableSelect:[],

        },
        mounted(){
            this.getManagement();
        },
        methods:{
            getManagement(){
                axios.get(`${apath}/sys/role/pagelist/${this.pageSize}/${this.pageNo}`,{params:this.managementVo})
                    .then(({data})=> {
                        this.data=data.result.record;
                        this.total=data.result.total;
                    })
                    },
            add(){
                this.role={},
                    this.modaladd=true;
            },
            doadd(){
                axios.post(`${apath}sys/role/add`,this.role)
                .then(({data})=>{
                    iview.Message.success({content:data.msg})
                    this.getManagement();
                })
            },
            update(row,index){
                this.role=row,
                    this.modalupdate=true;
            },
            doupdate(){
                let params =Qs.stringify(this.role,{serializeDate:(data)=>{
                    return moment(data).format("YYYY-MM-DD HH:mm");
                    }})
                axios.post(`${apath}sys/role/update`,Qs.parse(params))
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getManagement();
                    })
            },
            del(row,index){
                let _this =this;
                iview.Modal.confirm({
                    title:"确认要永久性删除？",
                    content:"此操作不可逆",
                    onOk(){
                        axios.get(`${apath}/sys/role/del/${row.id}`)
                        .then(({data})=>{
                            iview.Message.success({content:data.msg})
                            _this.getManagement()
                        })
                    },
                    onCancel(){
                            alert("取消成功")
                    }
                })
            },

            }


    })
</script>
</html>
